<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MiniAI 对话系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🤖 MiniAI 对话系统</h1>
            <div class="status" id="status">
                <span class="status-indicator" id="statusIndicator"></span>
                <span id="statusText">正在连接...</span>
            </div>
        </header>

        <main class="main">
            <div class="chat-container">
                <div class="chat-messages" id="chatMessages">
                    <div class="message system-message">
                        <div class="message-content">
                            <p>欢迎使用 MiniAI 对话系统！我是您的AI助手，可以与您进行对话。</p>
                            <p>系统特性：</p>
                            <ul>
                                <li>✅ 基于神经网络的对话模型</li>
                                <li>✅ 支持模型训练和微调</li>
                                <li>✅ 实时对话交互</li>
                                <li>✅ 可调节生成参数</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="input-container">
                    <div class="input-group">
                        <input 
                            type="text" 
                            id="messageInput" 
                            placeholder="请输入您的消息..." 
                            autocomplete="off"
                        >
                        <button id="sendButton" class="send-button">
                            <span class="send-icon">📤</span>
                            发送
                        </button>
                    </div>
                    
                    <div class="controls">
                        <details class="settings">
                            <summary>生成参数设置</summary>
                            <div class="settings-content">
                                <div class="setting-group">
                                    <label for="maxLength">最大长度:</label>
                                    <input type="range" id="maxLength" min="10" max="100" value="50">
                                    <span id="maxLengthValue">50</span>
                                </div>
                                
                                <div class="setting-group">
                                    <label for="temperature">创造性:</label>
                                    <input type="range" id="temperature" min="0.1" max="2.0" step="0.1" value="0.8">
                                    <span id="temperatureValue">0.8</span>
                                </div>
                                
                                <div class="setting-group">
                                    <label for="topK">多样性:</label>
                                    <input type="range" id="topK" min="1" max="100" value="50">
                                    <span id="topKValue">50</span>
                                </div>
                            </div>
                        </details>
                        
                        <button id="clearButton" class="clear-button">清空对话</button>
                    </div>
                </div>
            </div>

            <aside class="sidebar">
                <div class="model-info">
                    <h3>模型信息</h3>
                    <div id="modelInfo" class="info-content">
                        <p>正在加载模型信息...</p>
                    </div>
                </div>
                
                <div class="api-status">
                    <h3>API状态</h3>
                    <div id="apiStatus" class="info-content">
                        <p>正在检查API状态...</p>
                    </div>
                </div>
                
                <div class="quick-actions">
                    <h3>快捷操作</h3>
                    <button id="reloadModelButton" class="action-button">重载模型</button>
                    <button id="testConnectionButton" class="action-button">测试连接</button>
                </div>
            </aside>
        </main>

        <footer class="footer">
            <p>&copy; 2024 MiniAI 对话系统 | 基于深度学习的对话AI</p>
        </footer>
    </div>

    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner"></div>
        <p>AI正在思考中...</p>
    </div>

    <script src="script.js"></script>
</body>
</html>